﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Windows Phone: This needs internet connection</title>
    <!--  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>-->

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.js"></script>
    <!--      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>-->


    <link type="text/css" rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/humanity/jquery-ui.css" />

    <!--http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/ui-darkness/jquery-ui.css-->
    <style>
        .mobWrap {
            width: 402px;
            height: 560px;
            left: auto;
            right: auto;
            position: fixed;
            top: 25%;
            left: 50%;
            margin-top: -9em; /*set to a negative number 1/2 of your height*/
            margin-left: -15em; /*set to a negative number 1/2 of your width*/
          
            background-color: #f3f3f3;
        }
        .showlink {
        }
        #content {

        }
        #header {
            height:30px;
              width: 400px;
        }
        #main, .win {
              height: 520px;
             width: 400px;
        }
         #foot {
            height:50px;
             width: 400px;
        }
    </style>
</head>
<body>
    <div class="mobWrap">
        <div id="content" class="ui-widget">
            <div id="header" class="ui-state-error">
                My Phone
                <a class="showlink" href="http://localhost:3092/">Link1</a>
            </div>
            <div id="main" class="ui-widget-content">
              
            </div>
             <div id="foot" class=" ui-state-active">
                Status: Progress               
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var QuizModel = function () {
            this.self = this;

            self.Title = "My Phone";
            self.Content = "Initializing";
            self.Load = function () {
                $(".ui-widget-content").html(self.Content);
            }
        };
        var cool = new QuizModel();

        $(function () {
            $(".showlink").hide();
            var wind = $("<iframe class='win'></iframe>").attr("src", $(".showlink").attr("href"));
            $("#main").empty();
            $("#main").append(wind);
        });
    </script>
</body>
</html>
